import './houseitem.scss'
import {Tag, Space} from 'antd-mobile'
import { withRouter } from 'react-router-dom'
type Props = {
    houselist:any,
    history?:any
}

function Houseitem({houselist, history}: Props) {

  const houseTagStyle = [
    { color: "#39becd",background: "#e1f5f8",border:"none" },
    { color: "#3fc28c",background: "#e1f5ed",border:"none" },
    { color: "#5aabfd",background: "#e6f2ff",border:"none" },
    { color: "#000",background: "#fff",border:"none" }
  ]

  let url:string = 'http://localhost:8080';
  const goDetail = (e:any) => {
    let obj = e.target.dataset;
    if(obj){
      if(obj.name === 'item'){
        history.push({pathname:"/housedetail"},{id:obj.housecode})
        
      }
    }
    
  }
  return (
    <div className='houseitems' onClick={(e)=>goDetail(e)}>
      {
        houselist.map((item:any, index:number) => (
            <div key={index} className="houseItem">
            <div className='pic'>
                <img src={ url + item.houseImg } alt=""  data-housecode={item.houseCode} data-name="item"/>
            </div>
            <div className='text'>
                <div className='housename'  data-housecode={item.houseCode} data-name="item">{item.title}</div>
                <div className='houseDesc'  data-housecode={item.houseCode} data-name="item">{item.desc}</div>
                <div className='houseTags'  data-housecode={item.houseCode} data-name="item">
                <Space>
                    {
                    item.tags.map((subitem:string, subindex:number) =>(
                        <Tag  data-housecode={item.houseCode} data-name="item" style={houseTagStyle[subindex] || houseTagStyle[3]} key={subindex}>{subitem}</Tag>
                    ))
                    }
                </Space>
                </div>
                <div className='housePrice'  data-housecode={item.houseCode} data-name="item">{item.price}<span>元/月</span></div>
            </div>
            </div>
        ))
      }  
    </div>
  )
}

export default withRouter(Houseitem)